<!-- 新增或修改分摊比例 -->
<template>
  <div class="add_or_edit">
    <Table ref="TableHeight" :max-height="500" :columns="columns" border :data="tableData">
      <template slot-scope="{ row }" slot="userName">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">
          {{ item.userName ? item.userName : '-' }}
        </span>
      </template>
      <template slot-scope="{ row }" slot="workNo">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">
          {{ item.workNo ? item.workNo : '-' }}
        </span>
      </template>
      <template slot-scope="{ row }" slot="roleName">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">
          {{ item.roleName ? item.roleName : '-' }}
        </span>
      </template>
      <template slot-scope="{ row }" slot="bonusRatio">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">
          <InputNumber
            type="number"
            :min="0"
            :max="100"
            v-model="item.bonusRatio"
            @on-blur="changeInput(row)"
            :formatter="(value) => `${value}`"
            :parser="(value) => value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')"></InputNumber>
        </span>
      </template>
      <template slot="effectiveDate">
        <DatePicker
          :options="addOrEditOptions"
          type="date"
          @on-change="effectDate = $event"
          format="yyyy-MM-dd"
          :transfer="true"
          v-if="operationType == 1"></DatePicker>
        <span v-else>{{ $tool.formatterDate(effectDate) }}</span>
      </template>
    </Table>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消</Button>
      <Button type="primary" @click="submitFun()" style="margin-left: 8px" :loading="btnLoading">确定</Button>
    </div>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  export default {
    props: {
      addOrEditData: {
        type: Array,
        default: () => {
          return []
        }
      },
      operationType: {
        type: Number,
        default: 2
      }
    },
    data() {
      return {
        columns: [
          {
            title: '姓名',
            key: 'userName',
            minWidth: 100,
            align: 'center',
            slot: 'userName'
          },
          {
            title: '工号',
            key: 'workNo',
            minWidth: 100,
            align: 'center',
            slot: 'workNo'
          },
          {
            title: '案场角色',
            key: 'roleName',
            minWidth: 80,
            align: 'center',
            slot: 'roleName'
          },
          {
            title: '分摊比例（%）',
            key: 'bonusRatio',
            minWidth: 140,
            align: 'center',
            slot: 'bonusRatio'
          },
          {
            title: '生效日期',
            minWidth: 220,
            align: 'center',
            slot: 'effectiveDate'
          }
        ],
        tableData: this.$tool.deepClone(this.addOrEditData),
        effectDate: null,
        falgeAllNumber: false,
        allNumber: 0,
        addOrEditOptions: {},
        isSopStatus: true,
        btnLoading: false
      }
    },
    methods: {
      changeInput(obj) {
        this.tableData = this.$tool.deepClone([obj])
        this.allNumber = 0
        obj &&
          obj.bonusRatioList.map((item) => {
            this.allNumber += item.bonusRatio * 100
            this.falgeAllNumber = this.allNumber / 100 > 100 ? true : false
          })
        if (this.falgeAllNumber && this.isSopStatus) {
          this.$Message.error('相同角色的“奖金分摊比例”总和不可大于100%')
          return Promise.resolve(false)
        } else {
          return Promise.resolve(true)
        }
      },
      handleClose() {
        this.$emit('onClose')
      },
      submitFun() {
        if (this.effectDate == '') {
          return this.$Message.error('请选择生效日期！')
        }
        let isFlagbonusRatio = this.tableData[0].bonusRatioList.some((item) => {
          item.effectiveDate = this.effectDate
          return item.bonusRatio == null
        })
        if (isFlagbonusRatio) {
          this.$Message.error('分摊比例不能为空！')
          return false
        }
        this.changeInput(this.tableData[0]).then((res) => {
          if (res) {
            this.btnLoading = true
            let params = {
              form: this.tableData[0].bonusRatioList,
              operationType: this.operationType
            }
            teamsApi.adjustBonusRatio(params).then(() => {
              this.btnLoading = false
              if (this.operationType == 1) {
                this.$Message.success('新增成功!')
              } else {
                this.$Message.success('修改成功!')
              }
              this.handleClose()
              this.$emit('onChangeTable')
            })
          }
        })
      },
      getSopConfig() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          sopType: 30
        }
        teamsApi.getSopConfig(params).then((res) => {
          console.log(res)
          this.isSopStatus = res[0].isAssess
        })
      }
    },
    created() {
      this.effectDate = this.tableData[0].effectiveDate
      this.getSopConfig()
    }
  }
</script>
<style lang="scss" scoped>
  .add_or_edit {
    .btn-operate {
      margin-top: 20px;
    }

    .ivu-table-cell-slot {
      & > .sp1:last-child {
        border: none;
      }
    }

    .sp1 {
      display: block;
      min-height: 48px;
      line-height: 48px;
      text-align: center;
      border-bottom: 1px #e8eaec solid;
    }
  }
</style>
